<template>
  <div class="home-container">
    <!-- 用户已登录时展示近期工作项目卡片 -->
    <div v-if="isLoggedIn&&recentProjects.length>0" class="recent-projects">
      <h3>Recent Projects</h3>
      <br />
      <div class="project-cards">
        <div v-for="project in recentProjects" :key="project.id" class="project-card" @click="open_project(project.id)">
          <img :src="project?.thumbnail||default_pj" alt="Project Thumbnail" class="thumbnail" />
          <div class="card-content">
            <h4>{{ project?.name??'unknown' }}</h4>
            <!-- <span style="font-weight:bold">Author: </span><span>{{ project?.authorName||'unknown' }}</span><br/>
            <span style="font-weight:bold">Team: </span><span>{{ project?.teamName||'unknown' }}</span><br/> -->
            <span style="font-weight:bold">description: </span><span>{{ project?.description||'no description'
              }}</span><br />
            <span style="font-weight:bold">Favorites: </span><span>{{(project?.favorites ===0)?0: project?.favorites ||
              '-' }}</span><br />
            <span style="font-weight:bold">updatedAt: </span><span>{{ project?.updatedAt||'unknown' }}</span><br />
            <span style="font-weight:bold">CreatedAt: </span><span>{{ project?.createdAt|| project?.updatedAt||'unknown'
              }}</span><br />
            <br />
          </div>
          <div class="card-footer">
            {{ project?.isPublic === true ? 'Public' : 'Private' }}
          </div>
        </div>
      </div>
    </div>
    <br v-if="isLoggedIn" />
    <hr v-if="isLoggedIn" />
    <br v-if="isLoggedIn" />
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="Search project name..." @input="filterProjects" />
    </div>


    <!-- 广场公开项目卡片 -->
    <div class="public-projects">
      <h3>My Projects</h3>
      <div class="project-cards">
        <div class="project-card" @click="newPj">
          <div class="add-icon">
            <OperatorIcon :name="'+'" :W="32" :H="32" />
          </div>
        </div>
        <div v-for="project in searchfilteredProjects" :key="project.id" class="project-card"
          @click="open_project(project.id)">
          <img :src="project?.thumbnail || default_pj" alt="Project Thumbnail" class="thumbnail" />
          <div class="card-content">
            <h4>{{ project?.name ?? 'unknown' }}</h4>
            <!-- <span style="font-weight:bold">Author: </span><span>{{ project?.authorName || 'unknown' }}</span><br/>
            <span style="font-weight:bold">Team: </span><span>{{ project?.teamName || 'unknown' }}</span><br/> -->
            <span style="font-weight:bold">description: </span><span>{{ project?.description || 'no description'}}</span><br />
            <span style="font-weight:bold">Favorites: </span><span>{{(project?.favorites ===0)?0:
              project?.favorites||'-' }}</span><br />
            <span style="font-weight:bold">updatedAt: </span><span>{{ project?.updatedAt || 'unknown' }}</span><br />
            <span style="font-weight:bold">CreatedAt: </span><span>{{ project?.createdAt ||
              project?.updatedAt||'unknown' }}</span><br />
            <br />
          </div>
          <div class="card-footer">
            {{ project?.isPublic === true ? 'Public' : 'Private' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed,onMounted,nextTick } from 'vue';
import { useUserStore } from '../stores/userStore';
import default_pj from '@/assets/images/default_pj_1.png';
import { useRouter } from 'vue-router';
import { formatDateTimeCN,dayjslib } from '../utils/DataTime.js';
  import { useProjectsStore } from '../stores/projectsStore'; // 替换为你store路径
import OperatorIcon from '@/components/icons/OperatorIcon.vue';
// 用户登录状态
const userStore = useUserStore();
const isLoggedIn = computed(() => userStore.isLoggedIn);
const projectsStore = useProjectsStore();
const router = useRouter(); 

onMounted(() => {
  projectsStore.initializeProjects();
})
//安全加载
const valid_my_Projects = computed(() => {
  return projectsStore.projects.filter(project => project && project.id && project.loaded && project.content);
});
//点击跳转项目编辑页面
const open_project =async (id: string) => {
  await projectsStore.open_project(id);
}

const recentProjects = computed(() => {
  const now = Date.now();
  const aWeek = now - 3 * 24 * 60 * 60 * 1000;//ms 最近3天

  return valid_my_Projects.value.filter(project => {
    if (!project?.updatedAt) return false;
    let i = dayjslib.tz(project.updatedAt, 'YYYY-MM-DD HH:mm:ss', 'Asia/Shanghai');

    if (!i.isValid()) return false;
    const updatedDate = i.valueOf();
    return updatedDate >= aWeek && updatedDate <= now;
  });
});

// 搜索框绑定的数据
const searchQuery = ref('');
const searchfilteredProjects = computed(() => {
  return valid_my_Projects.value.filter((project) => {
    return project.name.toLowerCase().includes(searchQuery.value.toLowerCase());
  });
});
const newPj = async () => {
  await router.push('/flow'); 
  await nextTick();           
  setTimeout(() => {         
    const addBtn = document.getElementById('Addbtn');
    if (addBtn) {
      addBtn.click();
    }
  }, 100);
};
// 筛选项目
const filterProjects = () => {
  // This method could be expanded to filter by different criteria
};
</script>

<style scoped lang="scss">
/* Home Page Styles */
.home-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  padding: 20px;
  background: radial-gradient(circle at center,
      rgba(173, 216, 230, 0)20%,
      rgba(142, 201, 220, 0.3) 80%,
      rgba(110, 197, 225, 0.684) 100%);
}
.search-bar {
  margin-bottom: 20px;
  text-align: center;
}

.search-bar input {
  padding: 10px;
  font-size: 16px;
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
}

.search-bar input:focus {
  border-color: #007bff;
}

.project-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  position: relative;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.project-card .thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}
.project-card .add-icon {
  width:100%;
  height:330px;
  padding:100px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.project-card .card-content {
  padding: 10px 15px;
}

.project-card {
  h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  p {
    font-size: 14px;
    color: #555;
  }
}

.card-footer {
  position: absolute;
  bottom: 3px;
  right: 5px;
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
  height:30px;
  margin-right: 10px;
}

/* 如果没有登录的情况下 */
.recent-projects {
  overflow-x: auto;
  display: grid;
}

.recent-projects h3 {
  text-align: center;
  color: #333;
}

.public-projects h3 {
  text-align: center;
  color: #333;
  margin-top: 40px;
}
</style>